import React from 'react'
import AreaPicker from '@/components/Area/AreaPicker'

const Component = () =>
{
  //创建表单的对象结构
    const [form] = React.UI.Form.useForm()
    //初始化的个人资料数据
    let [business, SetBusiness] = useState({
       nickname: React.business.nickname,
       mobile: React.business.mobile,
       email: React.business.email,
       gender: React.business.gender,
       region_text: React.business.region_text,
       code: React.business.district || React.business.city || React.business.province
    })

    //个人头像数据
    let [avatar, SetAvatar] = useState([{
        url: React.business.avatar_text
    }]) 

    //头像删除
    const DelAvatar = () => SetAvatar([])

    //头像上传
    const upload = async (file:any) =>
    {
        business.avatar = file

        return {
            url:URL.createObjectURL(file)
        }
    }

    //地区显示
    let [Area, SetArea] = useState(false)
    //地区选中的默认值
    let AreaActive  = [React.business.province,React.business.city,React.business.district]
    //地区确认方法 接受传递的两个值
    const AreaConfirm = (val:any, list:any) => 
    {
        //隐藏地区组件
        SetArea(false)

        var code = ''

        for(var item of val)
        {
            if(item) code = item
        }

        var region_text = ''

        if(list[0]) region_text += `${list[0]}`
        if(list[1]) region_text += `-${list[1]}`
        if(list[2]) region_text += `-${list[2]}`
        // console.log(list);
        

        //修改数据 对表单中的input元素的值进行数据的修改 设置完表单的值
        form.setFieldsValue({
            region_text: region_text,
            code: code
        })

    }

    //表单提交方法
    const profile = async (values:any) => {
        //获得选择的地区码 根据上面设置完表单的值直接拿值
        if(form.getFieldValue('code'))
        {
            values.code = form.getFieldValue('code')
        }
        //判断是否有上传新头像
        if(business.avatar && typeof business.avatar === "object") {
            values.avatar = business.avatar
        }
        //做一个判断 如果没有密码就删除
        if(!values.password) delete values.password
        // React.toast('修改成功', 'back')
        console.log(values.avatar);

        //封装一下数据
        var params = {
            nickname:values.nickname,
            email:values.email,
            gender:values.gender,
            mobile:values.mobile,
            id:React.business.id,
            code:values.code,
            avatar:values.avatar
        }
        if(values.password){
            params.password = values.password
        }
        //发送异步请求
        var result = await React.request.upload('/business/profile',params)
        if(result.code == 0){
            React.toast(result.msg,null,'fail');
            return false
        }
        //覆盖cookie中的值
        React.cookie.save('business',result.data,{path:'/'})
        React.business = result.data
        React.toast(result.msg,result.url,'success');
        return false
    }
        

  return (
    <>
      {/* 地区组件 */}
      <AreaPicker visible={Area} active={AreaActive} onClose={() => SetArea(false)} onConfirm={AreaConfirm}  />

      {/* 表单结构 */}
      <React.UI.Form
          name="profile"
          layout='horizontal'
          mode='card'
          form={form}
          initialValues={business}
          onFinish={profile}
          footer={<React.UI.Button block type='submit' color='primary' size='large'>提交修改</React.UI.Button>}
      >
        {/* 头像 */}
          <React.UI.AutoCenter style={{margin: '30px 0px'}}>
              <React.UI.ImageUploader value={avatar} maxCount={1} onDelete={DelAvatar} onChange={SetAvatar} upload={upload} />
          </React.UI.AutoCenter>

          <React.UI.Form.Item name="nickname" label="昵称" rules={[{ required: true }]}>
              <React.UI.Input placeholder="请输入昵称" />
          </React.UI.Form.Item>

          <React.UI.Form.Item name="mobile" label="手机号" rules={[{ required: true}, {pattern:/^1[3456789]\d{9}$/, message: '手机号格式不对'}]}>
              <React.UI.Input placeholder="请输入手机号" />
          </React.UI.Form.Item>

          <React.UI.Form.Item name="password" label="密码">
              <React.UI.Input type="password" placeholder="请输入密码"/>
          </React.UI.Form.Item>

          <React.UI.Form.Item name="email" label="邮箱" rules={[{ required: true}, {pattern:/^\w{3,}(\.\w+)*@[A-z0-9]+(\.[A-z]{2,5}){1,2}$/, message: '邮箱格式不对'}]}>
              <React.UI.Input placeholder="请输入邮箱" />
          </React.UI.Form.Item>

          <React.UI.Form.Item name="gender" label="性别" rules={[{ required: true }]}>
              <React.UI.Radio.Group>
                  <React.UI.Space direction='horizontal'>
                  <React.UI.Radio value='0'>保密</React.UI.Radio>
                  <React.UI.Radio value='1'>男</React.UI.Radio>
                  <React.UI.Radio value='2'>女</React.UI.Radio>
                  </React.UI.Space>
              </React.UI.Radio.Group>
          </React.UI.Form.Item>

          <React.UI.Form.Item name="region_text" label="地区" onClick={() => SetArea(true)}>
              <React.UI.Input placeholder="请选择地区" readOnly />
          </React.UI.Form.Item>
      </React.UI.Form>
    </>
  )
}

export default Component